<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    width="80%"
    append-to-body
  >
    <div>
      <div style="text-align: right">
        <el-checkbox v-model="checked" class="cover">包含料单封面</el-checkbox>

        <el-button size="small" @click="PrintFile">打印</el-button>
        <el-button size="small" type="primary" @click="exportFile">导出</el-button>
      </div>

      <div class="title">LD123料单</div>

      <div class="mart">分部分项：一工区</div>
      <div class="con mart">
        <div>构建个数：9</div>
        <div>料单总重：9t</div>
        <div>需用日期：2022-04-28</div>
      </div>
      <div class="mart">备注：</div>

      <el-table class="tableSty" :data="tableData">
        <el-table-column
          label="1#TL1 构件数量：9 单重：1t 总重：9t"
          align="center"
        >
          <el-table-column label="编号" width="55" align="center">
            <template slot-scope="scope">{{ scope.$index + 1 }}</template>
          </el-table-column>
          <el-table-column prop="name" label="规格直径" align="center">
          </el-table-column>
          <el-table-column prop="province" label="钢筋简图" align="center">
          </el-table-column>
          <el-table-column prop="city" label="单长(mm)" align="center">
          </el-table-column>
          <el-table-column prop="address" label="根数" align="center">
          </el-table-column>
          <el-table-column prop="zip" label="总根数" align="center">
          </el-table-column>
          <el-table-column prop="zip" label="理重(kg)" align="center">
          </el-table-column>
          <el-table-column prop="zip" label="设计重量(kg)" align="center">
          </el-table-column>
          <el-table-column prop="zip" label="原材类型" align="center">
          </el-table-column>
          <el-table-column prop="zip" label="备注" align="center">
          </el-table-column>
        </el-table-column>
      </el-table>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: "",
  components: {},
  props: {},
  data() {
    return {
      dialogVisible: false,
      title: "",

      checked: true,
      tableData: [
        {
          date: "1",
          name: "2",
          province: "3",
          city: "4",
          address: "3410",
          zip: 6,
        },
        {
          date: "1",
          name: "2",
          province: "3",
          city: "4",
          address: "3410",
          zip: 6,
        },
        {
          date: "1",
          name: "2",
          province: "3",
          city: "4",
          address: "3410",
          zip: 6,
        },
      ],
    };
  },
  filters: {},
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  beforeDestroy() {},
  methods: {
    see() {
      this.dialogVisible = true;
      this.title = "料单详情查看";
    },
    PrintFile() {
      console.log('打印')
    },
    exportFile() {
      console.log('导出')
    },
  },
};
</script>

<style scoped lang="scss">
.cover {
  margin-right: 80px;
}
.title {
  font-weight: 700;
  font-size: 16px;
  color: #101010;
  margin-bottom: 30px;
}
.con {
  width: 50%;
  display: flex;
  justify-content: space-between;
}
.mart {
  margin: 10px 0;
}
.tableSty {
  width: 100%;
  margin-top: 20px;
}
</style>
